<template>
  <el-dialog :title="formData.id?'编辑经纪':'新增经纪'" :visible="showDialog" @close="closeFn">

    <el-form ref="form" label-width="120px" :rules="rules" :model="formData">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formData.email" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="formData.address" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" />
      </el-form-item>
      <el-form-item label="封面">
        <UploadImage ref="img1" @getImg="getImg" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button type="primary" size="small" @click="addFn">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { AddAgents, GetAgentsById, EditAgents } from '@/api/agents'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  }, data() {
    return {
      formData: {
        name: '',
        desc: '',
        image: 'http://',
        phone: '',
        address: '',
        email: ''

      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空！', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空！', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    getImg(img) {
      console.log(img)
      this.formData.image = img
    },
    // 根据id 实现角色数据回显
    async getAgentsById(id) {
      const res = await GetAgentsById(id)
      // console.log(64, res)
      this.formData = res.data
      // console.log(this.formData)
      // 实现图像 回显
      this.$refs.img1.imgUrl = this.formData.image
    },

    // 添加  //编辑
    async addFn() {
      // console.log(64, '添加按钮')
      // 整体表单校验
      await this.$refs.form.validate()
      if (this.formData.id) {
        // 编辑
        if (this.$refs.img1.percent > 0 && this.$refs.img1.percent < 100) {
          return this.$message.warning('图片上传中，请稍后保存！')
        }
        this.formData.image = this.$refs.img1.imgUrl
        await EditAgents(this.formData)
        // console.log(77, '完成编辑')
      } else {
        // 调用接口
        // const res = this.formData
        // console.log(90, res)
        await AddAgents(this.formData)
      }
      // console.log(71, '调用接口')
      // 关闭窗口
      this.closeFn()
      // 更新页面数据
      this.$emit('updateEvent')
      // console.log(83, '刷新页面')
    },
    // 重置
    reset() {
      this.formData = {
        name: '',
        desc: '',
        image: 'http://',
        phone: '',
        address: '',
        email: ''

      }
      // console.log(86, '重置完成')
    },
    // 关闭弹窗
    closeFn() {
      this.$emit('closeEvent', false)
      // 清空检验规则
      this.formData = {
        name: '',
        desc: '',
        image: 'http://',
        phone: '',
        address: '',
        email: ''
      }
      // 清空校验规则
      this.$refs.form.resetFields()
    }
  }

}
</script>

<style>

</style>
